<template>
	<div style="display: none;" id="spec">
		<input type="hidden" id="selectSpecId" value="" />
		<div class="back"></div>
		<div class="spec-box">
			<div class="attr-goods-header">
				<div class="attr-img">
					<img v-if="det.image!=undefined" :src="FileUrl+det.image" class="img" />
				</div>
				<div class="item-info">
					<p><strong style="font-size: 1.8rem;">￥{{det.price*Count}}</strong></p>
					<p><small>库存:100</small></p>
					<p><span id="spec-box-spectip">选择规格</span></p>
				</div>
			</div>
			<div class="spec-select">
				<div :id="'sp'+s.id" v-for="s in spec" class="spec-item">
					<p>{{s.name}}:</p>
					<p>
						<label :id="sv.id" :data-pid="s.id" v-for="sv in s.childList" class="">{{sv.text}}</label>
					</p>
				</div>
			</div>
			<div class="select-count">
				<div style="flex:4;"><label>数量</label></div>
				<div class="count-btn">
					<button class="count-min" @click="Count--">-</button>
					<input min="1" type="number" style="text-align: center;width: 10vw;border: 1px solid #f3f3f3;height: 100%;vertical-align: top;"
					 v-model="Count">
					<button class="count-plus" @click="Count++">+</button>
				</div>
			</div>
			<div class="spec-btn">
				<button @click="BuyNow();">立即购买</button>
				<button @click="AddCart();">加入购物车</button>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				FileUrl: config.FileUrl,
				//det: {},
				Count: 1,
				specArray: []
			}
		},
		props: ["spec", "det"],
		watch: {
			Count: function() {
				if (this.Count <= 0) {
					this.Count = 1;
				}
			}
		},
		methods: {
			AddCart: function() {
				var specItemArray = document.querySelectorAll('.spec-item');
				var msg = "";
				for (var i = 0; i < specItemArray.length; i++) {
					if (specItemArray[i].querySelector(".spec-active") == null) {
						msg = "请选择" + specItemArray[i].querySelector("p").innerHTML.replace(":", "!");
						break;
					}
				}
				if (msg != "") {
					this.$layer.toast({
						icon: 'icon-check', // 图标clssName 如果为空 toast位置位于下方,否则居中
						content: msg,
						time: 2000 // 自动消失时间 toast类型默认消失时间为2000毫秒
					});
					return;
				}
				this.$layer.dialog({
						title: ['提示', 'background:red;'], // 第一个是标题内容  第二个是标题栏的style(可以为空)
						content: '正在开发中...',
						contentClass: 'className',
						btn: ['确定'],
						time: 3000
					})
					// 如果有btn
					.then(function(res) {
						// res为0时是用户点击了左边  为1时用户点击了右边
						let position = res === 0 ? 'left' : 'right'
						console.log(position)
					})
			},
			BuyNow: function() {
				this.$layer.dialog({
						title: ['提示', 'background:red;'], // 第一个是标题内容  第二个是标题栏的style(可以为空)
						content: '正在开发中...',
						contentClass: 'className',
						btn: ['确定'],
						time: 3000
					})
					// 如果有btn
					.then(function(res) {
						// res为0时是用户点击了左边  为1时用户点击了右边
						let position = res === 0 ? 'left' : 'right'
						console.log(position)
					})
			}
		},
		mounted: function() {
			document.querySelector("#spec .back").addEventListener("click", () => {
				document.getElementById("spec").style.display = "none";
				var specArray = document.querySelectorAll(".spec-item");
				var activeArray = document.querySelectorAll(".spec-active");
				if (specArray.length == activeArray.length) {
					this.$emit("eventFromSpec", document.getElementById("spec-box-spectip").innerHTML);
				}

			});
		},
		updated() {
			//console.log("------------------------" + JSON.stringify(this.spec));
			var specTip = document.getElementById("spec-box-spectip");

			document.querySelectorAll(".spec-select label").forEach(function(v) {
				v.addEventListener('click', () => {
					var pid = v.getAttribute("data-pid");
					if (document.querySelector("#sp" + pid + " .spec-active") != null) {
						document.querySelector("#sp" + pid + " .spec-active").classList.remove("spec-active");
					}
					v.classList.add("spec-active");
					var spectip = document.getElementById("spec-box-spectip");
					var itemArray = document.querySelectorAll(".spec-item");
					for (var i = 0; i < itemArray.length; i++) {
						console.log(itemArray[i].innerHTML);
						if (i == 0) {
							specTip.innerHTML = itemArray[i].querySelector(".spec-active").innerHTML;
						} else {
							if (itemArray[i].querySelector(".spec-active") != null) {
								specTip.innerHTML += ",";
								specTip.innerHTML += itemArray[i].querySelector(".spec-active").innerHTML;
							}
						}
					}
				})
			});
		}
	}
</script>

<style scoped>
	.spec-box {
		position: fixed;
		width: 100%;
		bottom: 0;
		max-height: 100%;
		background-color: #fff;
		z-index: 2;
	}

	.spec-box .attr-goods-header {
		display: flex;
		border-bottom: 1px solid #f2f2f2;
	}

	.spec-box .item-info {
		padding: 1.4rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.spec-box .item-info p {
		display: flex;
		flex: 1;
		font-size: 1.4rem;
		color: #333333;
	}

	.spec-box .item-info p strong {
		font-size: 1.1.4rem;
		color: #FF4444;
	}

	.spec-box .item-info p small {
		color: #555555;
	}

	.spec-box .spec-item {
		padding: .5rem 1.4rem;
	}

	.spec-box .spec-item p:first-child {
		font-size: 1.6rem;
		color: #000000;
		margin-bottom: 1.4rem;
	}

	.spec-box .spec-item p:nth-child(2) label {
		padding: .4rem .6rem;
		border-radius: 5px;
		border: 1px solid #d1d1d1;
		margin-left: 1rem;
		margin-right: 1rem;
	}

	.spec-box .spec-select .spec-active {
		border-color: #F92028 !important;
		color: #F92028;
	}

	.select-count {
		margin: 1.4rem;
		font-size: 1.4rem;
		display: flex;
	}

	.select-count .count-plus,
	.count-min {
		width: 30px;
		background-color: #f8f8f8;
		border: none;
		outline: medium none;
		-webkit-appearance: none;
		font-size: 1.4rem;
		padding: .8rem 0;
	}

	.select-count .count-btn {
		font-size: 0;
	}

	.back {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		height: 100vh;
		background-color: rgba(0, 0, 0, .7);
		z-index: 2;
	}

	.attr-img {
		width: 30vw;
		height: 30vw;
		position: relative;
		padding-left: 1.4rem;
		top: -10vw;
		display: inline-block;
		font-size: 0;
	}

	.attr-img img {
		border-radius: .5rem;
	}

	.spec-btn {
		display: flex;
		color: white;
	}

	.spec-btn button {
		color: white;
		width: 50%;
		font-size: 1.4rem;
		padding: 1.4rem 0;
		border: none;
		animation: none;
	}

	.spec-btn button:first-child {
		background-color: #ff9e05;
	}

	.spec-btn button:last-child {
		background-color: #f44;
	}
</style>
